// 支付保证金
import React, { PureComponent } from 'react';
import DocumentTitle from 'react-document-title';
import { withRouter } from 'react-router-dom'

import { SubmitStyle } from '../style'
import { Button, Toast } from 'antd-mobile'

import request from '@service'
import { payRet } from '@api/submit'

import { getQueryString } from '@/utils'
import { OrderGoodsItem } from '@common/goodsItem'
import { Address, PriceDetail } from '../components';

import { store } from '@store'

class Pay extends PureComponent {
  state = {
    orderDetail: {},
    orderno: '',
  }

  componentDidMount() {
    let orderno = this.props.match.params.orderno

    let getCaigouInfo = {
      data: {
        action: 'payment_show',
        deposit_orderno: orderno,
      }
    }

    request(getCaigouInfo).then(res => {
      if (res.status === 200) {
        this.setState({
          orderDetail: res.data,
          sfje: res.data.sfje,
          orderno: res.data.deposit_orderno
        })
      } else {

      }
    })

  }

  render() {

    const { orderDetail } = this.state

    return (
      <>
        <DocumentTitle title={this.props.route.title} />

        <div style={{ backgroundColor: '#F5F5F5', height: '100%' }}>

          <SubmitStyle>

            {orderDetail.good &&

              <div style={{ margin: '.14rem .32rem' }}>

                <Address data={orderDetail.address} type={ 'pay' } />

                <OrderGoodsItem marginStyle={{ marginTop: '.13rem', padding: '.32rem 0' }} className="single-goods" goods={orderDetail.good} />

                <PriceDetail priceList={orderDetail.priceList} />


                <div className="remark common-cards">
                  <span>订单备注</span>
                  <input style={{ border: 'none', marginLeft: '.33rem', width: '6rem' }} name="remark" value={ this.state.remark } 
                  onChange={ e => { this.handelInput(e) }}
                  placeholder="选填" type="text" />
                </div>



              </div>
            }

            <div className="confirm-pay flex-row">
              <div className="pay-price">
                <span>您需要支付：</span>
                <span>￥{orderDetail.priceList && this.state.sfje}</span>
              </div>
              <Button
                className="pay-button"
                onClick={e => { this.pay(this.state.sfje) }}
              >
                确认支付
            </Button>
            </div>
          </SubmitStyle>

        </div>

      </>
    );
  }


  handelInput(e) {
    this.setState({
      [e.target.name]: e.target.value
    })
  }

  async pay(price) {

    let orderno = this.props.match.params.orderno

    // let reg = /([&]platMerCstNo=\d*)/g
    // console.log(res.data.match(reg)[0] )

    let hash = window.location.hash
    let url = window.location.href.replace(hash, '#/paysuccess/') + orderno
    

    // 1266
    let params = {
      action: 'createOrder',
      uniacid: store.getState().appConfig.uniacid,
      orderno,
      price,
      url
    }

    console.log( params )

    // https://pay.tzbank.com:11112/pages/index.html?orderNoList=8442777519307895467&businessCstNo=1266&platMerCstNo=8238509791249432688

    let res = await payRet(params)

    console.log(res)

    if (res.status === 200) {
      let no = getQueryString(res.data, 'orderNoList')
      localStorage.setItem('orderNoList', JSON.stringify(no))
      window.location.href = res.data
    } else {
      Toast.fail('非法参数', 1)
    }
  }
}


export default withRouter(Pay);